<template>
  <div class="bookingPage">
    <div v-if="list.length !== 0">
      <van-row class="container" type="flex" justify="space-between">
        <van-col class="bookingItemBox" span="12" v-for="(item, index) in list" :key="index">
          <div class="bookingItem" :class="index % 2 === 0 ? 'flex_r_fs_fs' : 'flex_r_fe_fs'">
            <div class="itemInner border_r8 flex_c_fs_c bg_w">
              <van-image class="itemImg" width="16.6rem" height="16rem" :src="item.image">
                <template v-slot:loading>
                  <van-loading type="spinner" size="2rem" />
                </template>
              </van-image>
              <div class="itemBotton flex_c_c_c">
                <p class="f_16 fw_700 tc_0 margin_t12 margin_b8 text_line_1 textA_c" style="line-height: 1.8rem">
                  {{ item.name }}
                </p>
                <p class="f_11 tc_9 margin_b16">{{ item.starttime }}:00 - {{ item.endtime }}:00</p>
                <!-- <p class="f_11 tc_9 margin_b16 text_line_1 textA_c" style="line-height: 1.6rem">({{ item.city }}{{ item.address }})</p> -->
                <span class="bookingBtn bg_g" @click="onBooking(item)">预约</span>
              </div>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <loading-data v-if="list.length === 0 || isLoading" :listLength="list.length" :isLoading="isLoading" :textType="0"></loading-data>

    <van-tabbar v-model="active" @change="onTabbarChange">
      <van-tabbar-item name="booking">
        <span class="tc_g">誉约</span>
        <template #icon="props">
          <img :src="props.active ? homeIcon.active : homeIcon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="user" icon="search">
        <span class="tc_9">我的</span>
        <template #icon="props">
          <img :src="props.active ? userIcon.active : userIcon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import booking from '@/api/booking'
import loadingData from '@/components/loadingData.vue'
import {removeVenuesId} from '@/utils/auth'
export default {
  components: {
    loadingData
  },
  data() {
    return {
      active: 'booking',
      isLoading: true,
      list: [],
      homeIcon: {
        active: require('@/assets/home_active.png'),
        inactive: require('@/assets/home.png')
      },
      userIcon: {
        active: require('@/assets/user_active.png'),
        inactive: require('@/assets/user.png')
      }
    }
  },
  computed: {
    ...mapGetters(['token', 'userInfo', 'status'])
    // userInfo() {
    //   return this.userInfo
    // }
  },
  methods: {
    onTabbarChange(index) {
      if (index === 'user') {
        this.$router.push({
          path: '/user'
        })
      }
    },
    getBookingVenuesList() {
      this.isLoading = true
      booking.getBookingVenuesList().then((res) => {
        this.list = res.data.rows
        this.isLoading = false
      })
    },
    onBooking(data) {
      this.$router.push({
        path: `/bookingDetails/${data.id}`
      })
    }
  },
  mounted() {
    removeVenuesId()
    this.getBookingVenuesList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingPage {
  height: 100%;
  padding: 1.2rem 1.2rem;
  box-sizing: border-box;
}
.container {
  margin-bottom: 6rem;
}
.container .bookingItemBox {
  // width: 50%;
  height: 31rem;
  // margin-bottom: 12px;
}
.bookingItemBox .bookingItem {
  width: 100%;
  height: 29.2rem;
}
.bookingItemBox .itemInner {
  width: 16.6rem;
  height: 29.2rem;
  overflow: hidden;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}
.itemInner {
  .itemBotton {
    padding: 0 0.8rem;
    box-sizing: border-box;
    .bookingBtn {
      width: 8.4rem;
      height: 3.2rem;
      line-height: 3.2rem;
      text-align: center;
      // padding: 0 2.6rem;
      box-sizing: border-box;
      border-radius: 3.2rem;
      color: #fff;
      font-size: 1.6rem;
    }
  }
}
.noData {
  height: 100%;
  i {
    font-size: 10rem !important;
    color: #888;
  }
}
</style>
